
<template lang="html">
  <div class="serial_content">
    <div class="serial_nav clear">
      <img @click="cli()" src="../../static/img/left.png"/>
       <p>连 载</p>
      <img src="../../static/img/collect.png" alt="">
    </div>
    <h1>{{title}}</h1>
    <p>文 / {{ author }}</p>
    <div v-html="content" class=""></div>
    <p class="bto_p">{{adt}}</p>
    <p class="bto_p">{{copyright}}</p>
    <div class="u_d">
      <span v-if="lastid == 0" class="fina">< 前一章</span>
      <span v-else class="serial_up" @click="up()">< 前一章</span>
      <span v-if="nextid == 0" class="fina">后一章：即将更新</span>
      <span v-else class="serial_down" @click="down()">后一章 ></span>
    </div>
    <div class="author">
         <a name="pl"></a>
       <p class="author_p">作者</p>
      <div class="author_div clear">
        <img :src="tou" @touchstart="fangda()" @touchend="suoxiao()" />
        <div>
          <p class="name">{{ name }} {{weibo}}</p>
          <p class="jie">{{ summary }}</p>
          <p class="guan">关注</p>
        </div>
      </div>
      <!-- 作者小弹窗 -->
      <div class="hidde">
        <img :src="tou" alt="" class="author_img">
        <p class="author_name">{{ name }}</p>
        <p class="author_summary">{{ summary }}</p>
        <p class="desc">{{ desc }}</p>
        <span class="sanjiao"></span>
      </div>
    </div>
    <!-- 评论 -->
    <div class="commen">
       <p class="commen_p">评论列表</p>
       <ul>
         <li class="commen_li " v-for="(item,index) in arr">
           <div class="commen_div clear">
            <img :src="item.user.web_url">
             <span>{{ item.user.user_name }}</span>
             <time>{{ item.input_date.substring(0,16).replace(/-/g, '.') }}</time>
           </div>
            <div v-if="item.quote == ''" class="comment">
              {{ item.content }}
            </div>
            <div v-else >
              <div class="huifu">
                {{ item.touser.user_name }}:
                {{ item.quote }}
              </div>
              <div class="comment">
                  {{ item.content }}
              </div>
            </div>
            <div class="commen_bom">
              <span class="icon-message"></span>
              <!-- hand -->
              <span  class="icon-hands red" v-if="goods[index]" @click="cancel(index,item.praisenum,item.id)"></span>
              <span class="icon-hands" v-else @click="add(item.praisenum,item.id,index)"></span>

              <!-- num -->
              <span class="shownum" v-if="goods[index]">{{ item.praisenum+1 }}</span>
              <span class="shownum" v-else>{{ item.praisenum }}</span>

            </div>


         </li>
       </ul>
    </div>
     <!-- 评论底部 -->
     <div class="combot">
        <input type="text" name="" value="" placeholder="写一个评论">
        <div class="serial_bottom_img">
         <span v-if="li == 1" class="icon-shou2" @click="dislick()"></span>
         <span v-if="li != 1" @click="like()" class="icon-shou1"></span>
          <span v-if="li == 1">{{  praisenum+1 }}</span>
          <span v-if="li != 1">{{ praisenum }}</span>
          <a href="#pl" @click:prevent><img v-bind:src="commentsSrc" alt=""></a>
          <span>{{commentnum}}</span>
          <img v-bind:src="shareSrc" alt="">

        </div>
     </div>
  </div>

</template>

<script>
import axios from 'axios'
import bus from './bus'
export default {
  data(){
    return{
      title:'',
      author:'',
      content:'',
      adt:'',
      copyright:'',
      lastid:'',
      nextid:'',
      tou:'',
      name:'',
      weibo:'',
      summary:'',
      // 评论
      arr:'',
      num:'',
      canClick:true,
      flag:"",
      // 作者详情
      serial_author:'',
      likeSrc:'../../static/img/like.png',
      commentsSrc:'../../static/img/comments.png',
      shareSrc:'../../static/img/share.png',
      commentnum:'',
      praisenum:'',
      li:'',
      desc:'',
      jsons:{"id":"","isTrue":false},
      // 点赞数组
      goods:[]
    }
  },
  created(){
    axios.get('http://v3.wufazhuce.com:8000/api/serialcontent/'+this.$route.params.id+'?channel=wdj&source=channel_reading&source_id=9254&version=4.0.2&uuid=ffffffff-a90e-706a-63f7-ccf973aae5ee&platform=androi').then((response)=>{
          this.title = response.data.data.title;
          this.author = response.data.data.author.user_name;
          this.content =response.data.data.content;
          this.adt = response.data.data.charge_edt;
          this.copyright =response.data.data.copyright;
          this.lastid = response.data.data.lastid;
          this.nextid = response.data.data.nextid;
          this.tou = response.data.data.author.web_url;
          this.name=response.data.data.author.user_name;
          this.weibo=response.data.data.author.wb_name;
          this.summary = response.data.data.author.summary;
          this.serial_author = response.data.data.author;
          this.commentnum =response.data.data.commentnum;
          this.praisenum = response.data.data.praisenum;
          this.desc = response.data.data.author_list[0].desc

          // 请求评论
          axios.get('http://v3.wufazhuce.com:8000/api/comment/praiseandtime/serial/ '+this.$route.params.id+'/0?channel=wdj&version=4.0.2&uuid=ffffffff-a90e-706a-63f7-ccf973aae5ee&platform=android').then((res)=>{
              this.arr = res.data.data.data;
              for(let i=0;i<this.arr.length;i++){
                  // this.goods[i].id = this.arr[i].id;
                  this.goods[i] = false;
              }
})
    })

  },
  methods:{
    // 作者弹窗
    fangda(){
      console.log('aaaaaaaa');
      let hidde = document.querySelector('.hidde');
      this.timer = setTimeout(function(){
        hidde.style.display = 'block';
      }, 1000)
    },
    suoxiao(){
      let hidde = document.querySelector('.hidde');
      hidde.style.display = 'none';
      clearTimeout(this.timer);
    },
    zuozhe(){
      // //:作者的简介
      this.$router.push({
        path:'/allDetials/serialcontent/author',
        name:"author",
        params:{
          username:this.serial_author.user_name,
          img:this.serial_author.web_url,
          summary:this.serial_author.summary,
          desc:this.serial_author.desc,
          fans_total:this.serial_author.fans_total


        }
      })
    },
    cli(){
      this.$router.push({
        path:'/allDetials/serialcontent'
      })
    },
    like(){
      this.li = 1;
    },
    dislick(){
      this.li = 0;
    },
    add(num,id,index){
      this.goods[index] = true;
      this.goods.push("1");
    },
    cancel(index){
      this.goods[index] = false;
      this.goods.pop();
    },
    up(){
     this.$router.push({
       path:'/allDetials/serial/'+this.lastid
     })
   },
   down(){

     if(this.nextid != 0){
        this.$router.push({
          path:'/allDetials/serial/'+this.nextid
        })
     }
   },
   init(){
     let url = 'https://cdnjs.cloudflare.com/ajax/libs/social-share.js/1.0.16/js/social-share.min.js'
        let script = document.createElement('script')
        script.setAttribute('src', url)
        document.getElementsByTagName('head')[0].appendChild(script)
   }

},
watch:{
  '$route'(newValue,oldValue){
     axios.get('http://v3.wufazhuce.com:8000/api/serialcontent/'+newValue.params.id+'?channel=wdj&source=channel_reading&source_id=9254&version=4.0.2&uuid=ffffffff-a90e-706a-63f7-ccf973aae5ee&platform=androi').then((response)=>{
           this.title = response.data.data.title;
           this.author = response.data.data.author.user_name;
           this.content =response.data.data.content;
           this.adt = response.data.data.charge_edt;
           this.copyright =response.data.data.copyright;
           this.lastid = response.data.data.lastid;
           this.nextid = response.data.data.nextid;
           location.reload();
     })
  }

},
mounted () {
      this.init()
    }
}
</script>

<style lang="css" scoped>
*{
  padding: 0px;
  margin:0px;
  /*font-size: 1.7rem;*/
}
/*文章整体*/
.serial_content{
  text-align: left;
  position: relative;
  background-color: #fff;
  z-index: 2;
}
.serial_nav{
  position: fixed;
  background-color: #fff;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 4rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 200
}
.serial_nav>img{
  /*float: left;*/
  margin-top: 0.2rem;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
/*.serial_nav>img:nth-of-type(2){
  float: right;
  margin-top: 1rem;
  margin-right: 1%;
}*/
.serial_nav>p{
  float: left;
  width: 88%;
  font-size: 1.8rem;
}
.serial_content{
  margin-top: 4.5rem;
}
.serial_content>p{
  width: 94%;
  color: gray;
  margin: 2.5rem auto;
  margin-bottom: 0rem;
}
.serial_content>h1{
  width: 94%;
  margin: 2.5rem auto;
  /*text-align: left;*/
}
.serial_content>div:nth-of-type(2){
  font-size: 1.5rem;
  width: 94%;
  line-height: 2.5rem;
  margin: 1rem auto;

}
.serial_nav{
  width: 100%;
  height: 4rem;
  line-height: 4rem;
  border-bottom: 1px solid #c0c0c0;
  text-align: center;
}
p.bto_p{
  margin-top: 0.5rem;
  color: #c0c0c0;
  font-size:0.2rem;
}
.u_d{
  width: 94%;
  height: 3rem;
  margin: 0 auto;
  margin-top: 1.5rem;
  font-size: 1.4rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.fina{
  color: #c0c0c0;
}
/*作者*/
.author{
  width: 96%;
  margin:2rem auto;
  margin-bottom: 3rem;
  position: relative;
}
.author>p{
  height: 2.5rem;
  width: 5.5rem;
  border-bottom: 0.4rem solid #000;
}
.author_div{
  margin-top: 1rem;

}
.clear:after{
  content: '';
  display: block;
  clear: both;
}
.author_div>img{
  width: 4rem;
  height: 4rem;
  border: 1px solid transparent;
  float: left;
  border-radius: 50%;
  margin-right: 1rem;
}
.author_div>div{
 width: 55%;
 float: left;
 margin-left: 2%;
 line-height: 2rem;
}
.author_div>div>p:nth-of-type(2){
  color: #c0c0c0;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.author_div>div>p:nth-of-type(3){
float: right;
border: 1px solid #c0c0c0;
width: 4rem;
text-align: center;
margin-top: -3rem;
margin-right:-5.5rem;
}
/*评论*/
.commen{
  width: 96%;
  margin:0rem auto;
}
.commen>p{
  height: 2.5rem;
  width: 5.5rem;
  border-bottom: 0.4rem solid #000;
}
.commen_li{
  border-bottom: 1px solid #c0c0c0;
  margin-top: 1rem ;
}
.commen_div>img{
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid transparent;
  border-radius: 50%;
  float: left;
}
.commen_div>span{
  margin-left: 1rem;
  line-height: 2.5rem;
  color: gray;
}
.commen_div>time{
  float: right;
  line-height: 2.5rem;
  color: gray;
  margin-right: 0.5rem;
}
.comment{
  width: 80%;
  margin: 0.7rem auto;
}
.huifu{
  width: 80%;
  margin: 0.7rem auto;
  line-height: 1.9rem;
  padding: 0.5rem;
  letter-spacing:  0.1rem;
  border: 1px solid lightgray;
}
.icon-hands:before {
  content: "\e901";
  font-size: 2rem;
}
.icon-message:before {
  content: "\e900";
  font-size: 2rem;
}
.commen_bom{
  text-align: right;
  color: gray;
  margin-bottom: 1rem;
}
.commen_bom>span{
  margin-right: 1rem;
}
.commen_bom>span:nth-of-type(2){
  margin-right: 0.1rem;
}
.red{
  color:#000;
}
/*评论底部*/
.combot{
  width: 100%;
  height: 4rem;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  line-height: 4rem;
}
.combot>input{
  border: 1px solid #000;
  height: 2rem;
  outline: none;
  width: 40%;
  margin-left: 1rem;
  border-radius: 0.4rem;
}
.serial_bottom_img{
  height: 2rem;
  float: right;
  margin-right: 1rem;

}
.serial_bottom_img img{
  display: inline-block;
  vertical-align: middle;
}
.serial_bottom_img>span:nth-of-type(2){
  margin-right: 1rem;
}
.serial_bottom_img>span:nth-of-type(1){
  margin-right: 0;
  vertical-align: middle;
  float: left;
  margin-top:1rem;
  /*margin-right: 0rem;*/

}
.icon-shou1:before {
  content: "\e90b";
  font-size: 2.5rem;
  color: #000;
}
.icon-shou2:before{
  content: "\e90c";
  font-size: 2.5rem;

}
/*作者小弹窗*/
.hidde{
  width:60%;
  /*height:10rem;*/
  background: #f5f4f4;
  text-align: center;
  border-radius: 8px;
  display: none;
  position: absolute;
  bottom: 8rem;
  left: 5rem;
}
.hidde>.author_img{
  margin:1rem 0 0rem 0rem;
  clear: both;
  width:5rem;
  height:5rem;
  border-radius: 50%;
}
.hidde .author_summary{
  margin:0 0 0 0.8rem;
  line-height: 2rem;
  height:2rem;
  width: 60%;
  color: gray;
  display: inline-block;
}
.desc{
  margin:1rem 1rem 0 1rem;
  padding:0 0 1.5rem 0;
  line-height: 1.5rem;
}
.sanjiao{
  width: 0;
  height: 0rem;
  border: 1rem solid transparent;
  border-top: 1rem solid #f5f4f4;
  position: absolute;
  bottom: -2rem;
  left: 2rem;
}
</style>
